<template>
  <div class="village-wrap">
    <div class="main g-bkColor">
      <div class="top-part" :style="{ height:topPartHeight + 'px'}">
        <div class="side mR10 g-bkColor2" style="margin-right:10px;">
          <!--小区描述-->
          <Alarm-detail :summary="this.summaryDetail"></Alarm-detail>
        </div>
        <div class="center mR10 g-bkColor2">
          <!--当前报警-->
          <Alarm-map :dept-id="this.$route.params.deptId"></Alarm-map>
        </div>
        <div class="side g-bkColor2">
          <!--社区监控-->
          <Alarm-list :dept-id="this.$route.params.deptId"></Alarm-list>
        </div>
      </div>

      <div class="bottom-part" :style="{ height:bottomPartHeight + 'px'}">
        <div class="side mR10 g-bkColor2" style=" margin-right:10px;">
          <!--垃圾桶-->
          <Dust-rank :dept-id="this.$route.params.deptId"></Dust-rank>
        </div>
        <div class="center mR10 center-list g-bkColor2">
          <!--车辆进出-->
          <Dustbin-list :dept-id="this.$route.params.deptId"></Dustbin-list>
        </div>
        <div class="side">
          <!--环境感知-->
          <EnvironmentAware :dept-id="this.$route.params.deptId"></EnvironmentAware>
        </div>
      </div>
    </div>

  </div>
</template>
<script>
import AlarmDetail from './components/alarmDetail.vue'
import EnvironmentAware from './components/environmentAware.vue'
import AlarmMap from '../../../../components/village/alarmMap'
import DustRank from '../../../../components/village/dustRank'
import DustbinList from '../../../../components/village/dustbinList'
import AlarmList from '../../../../components/village/alarmList'

export default {
  name: 'index',
  components: {
    AlarmDetail,
    AlarmMap,
    DustRank,
    DustbinList,
    AlarmList,
    EnvironmentAware
  },
  data () {
    return {
      centerBoxWidth: 0,
      topPartHeight: 0,
      bottomPartHeight: 0,
      summaryDetail: {},
      camaraList: [],
      nameInfo: {
        deptName: '包装城',
        address: '宝安公路3705号'
      }
    }
  },
  mounted () {
    let gWidth = this.$base.getDocumentWidth() - this.$base.getConst('common', 'sidebarWidth')
    let gHeight = this.$base.getDocumentHeight() - this.$base.getConst('common', 'headerHeight')
    this.centerBoxWidth = gWidth - 600
    this.topPartHeight = (gHeight - 30) * 0.54
    this.bottomPartHeight = (gHeight - 30) * 0.46
    this.getMainData()
    this.getCamaraData()
  },
  methods: {
    getMainData () {
      let url = this.$base.getUrl('summaryByDeptId')
      let params = {
        url: url,
        data: {
          'deptId': this.$route.params.deptId
        }
      }

      this.$store.dispatch('postForm', params).then((res) => {
        this.summaryDetail = res.result
      })
    },
    getCamaraData () {
      let url = this.$base.getUrl('getCamarasByDeptId')
      let params = {
        url: url,
        data: {
          'deptId': this.$route.params.deptId
        }
      }

      this.$store.dispatch('postForm', params).then((res) => {
        this.camaraList = res.result
      })
    }
  }
}
</script>

<style lang="less" scoped>
  .village-wrap {
    width: 100%;
    height: 100%;
    background-color: #202835;
  }

  .main {
    padding: 10px;
  }

  .top-part {
    margin-bottom: 10px;
    min-height: 390px;
  }

  .bottom-part {
    min-height: 290px;
  }

  .top-part, .bottom-part {
    display: flex;
    display: -webkit-flex;
    flex-direction: row;

    .side {
      width: 20%;
      border-radius: 4px;
      min-width: 290px;
      max-width: 290px;
      background: rgba(43, 54, 72, 0.95);
    }
    .center {
      width: 100%;
      border-radius: 4px;
      min-width: 548px;
      background: rgba(43, 54, 72, 0.95);
    }
  }

  .center-list {
    overflow: hidden;
  }

  .main .mR10 {
    margin-right: 10px;
  }

  .side-split {
    width: 20%;
    border-radius: 4px;
    min-width: 290px;
    max-width: 290px;

  }

  .mid-half {
    display: flex;
    display: -webkit-flex;
    flex-direction: column;
    .half-top {
      margin-bottom: 10px;
    }
    .half-top, .half-bottom {
      width: 100%;
      height: 50%;
      border-radius: 4px;
      background: rgba(43, 54, 72, 0.95);
    }
  }
</style>
